<!doctype html>

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>SweetAlert</title>
    <meta name="description" content="A beautiful replacement for JavaScript&apos;s &apos;alert&apos;">

    <link rel="stylesheet" href="/assets/css/app.css">

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <script src="/assets/sweetalert/sweetalert.min.js"></script>
  </head>

  <body>

    <header class="global-header">
      <div class="page-container">

        <a href="/" class="logo">
        </a>

        <nav>
          <ul>
            <li>
              <a href="/guides">Guides</a>
            </li>

            <li>
              <a href="/docs">Docs</a>
            </li>

            <li>
              <a href="https://www.paypal.me/edwards" target="_blank">Donate</a>
            </li>

            <li>
              <a href="https://github.com/t4t5/sweetalert" class="github-icon"></a>
            </li>
          </ul>
        </nav>

      </div>
    </header>

    <!--
layout: default
-->

<div class="page-container doc-container">

  <nav class="side-menu">
    <h6 class="title">
      Guides
    </h6>

    <a href="#installation">
      Installation
    </a>

    <a href="#getting-started">
      Getting started
    </a>

    <a href="#advanced-examples">
      Advanced examples
    </a>

    <a href="#upgrading-from-1x">
      Upgrading from 1.X
    </a>
  </nav>

  <div class="page-content">
    <!--
layout: guides
-->
<h1 id="installation" class="deep-link"><a href="#installation">Installation</a></h1>
<h2 id="npmyarn" class="deep-link"><a href="#npmyarn">NPM/Yarn</a></h2>
<p>NPM combined with a tool like <a href="http://browserify.org">Browserify</a> or <a href="https://webpack.js.org">Webpack</a> is the recommended method of installing SweetAlert.</p>
<div class="highlight bash"><pre class="editor editor-colors"><div class="line"><span class="text plain null-grammar"><span>npm&#xA0;install&#xA0;sweetalert&#xA0;--save</span></span></div></pre></div>
<p>Then, simply import it into your application:</p>
<div class="highlight javascript"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta import js"><span class="keyword control js"><span>import</span></span><span>&#xA0;</span><span class="variable other module js"><span>swal</span></span><span>&#xA0;</span><span class="keyword control js"><span>from</span></span><span>&#xA0;</span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>&apos;</span></span><span>sweetalert</span><span class="punctuation definition string end js"><span>&apos;</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<h2 id="cdn" class="deep-link"><a href="#cdn">CDN</a></h2>
<p>You can also find SweetAlert on <a href="https://unpkg.com/sweetalert">unpkg</a> and <a href="https://cdn.jsdelivr.net/npm/sweetalert">jsDelivr</a> and use the global <code>swal</code> variable.</p>
<div class="highlight html"><pre class="editor editor-colors"><div class="line"><span class="text html basic"><span class="meta tag any html"><span class="punctuation definition tag html"><span>&lt;</span></span><span class="entity name tag html"><span>script</span></span><span>&#xA0;</span><span class="entity other attribute-name html"><span>src</span></span><span>=</span><span class="string quoted double html"><span class="punctuation definition string begin html"><span>&quot;</span></span><span class="markup underline link https hyperlink"><span>https://unpkg.com/sweetalert/dist/sweetalert.min.js</span></span><span class="punctuation definition string end html"><span>&quot;</span></span></span><span class="punctuation definition tag html"><span>&gt;</span><span class="meta scope between-tag-pair html"><span>&lt;</span></span><span>/</span></span><span class="entity name tag html"><span>script</span></span><span class="punctuation definition tag html"><span>&gt;</span></span></span></span></div></pre></div>
<h1 id="getting-started" class="deep-link"><a href="#getting-started">Getting started</a></h1>
<h2 id="showing-an-alert" class="deep-link"><a href="#showing-an-alert">Showing an alert</a></h2>
<p>After importing the files into your application, you can call the <code>swal</code> function (make sure it&apos;s called <em>after</em> the DOM has loaded!)</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Hello&#xA0;world!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>If you pass two arguments, the first one will be the modal&apos;s title, and the second one its text.</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Here&apos;s&#xA0;the&#xA0;title!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>...and&#xA0;here&apos;s&#xA0;the&#xA0;text!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>And with a third argument, you can add an icon to your alert! There are 4 predefined ones: <code>&quot;warning&quot;</code>, <code>&quot;error&quot;</code>, <code>&quot;success&quot;</code> and <code>&quot;info&quot;</code>.</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Good&#xA0;job!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>You&#xA0;clicked&#xA0;the&#xA0;button!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<h2 id="using-options" class="deep-link"><a href="#using-options">Using options</a></h2>
<p>The last example can also be rewritten using an object as the only parameter:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;title</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Good&#xA0;job!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>You&#xA0;clicked&#xA0;the&#xA0;button!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;icon</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p>With this format, we can specify many more options to customize our alert. For example we can change the text on the confirm button to <code>&quot;Aww yiss!&quot;</code>:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;title</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Good&#xA0;job!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>You&#xA0;clicked&#xA0;the&#xA0;button!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;icon</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;button</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Aww&#xA0;yiss!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>You can even combine the first syntax with the second one, which might save you some typing:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Good&#xA0;job!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>You&#xA0;clicked&#xA0;the&#xA0;button!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;button</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Aww&#xA0;yiss!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p>For a full list of all the available options, check out the <a href="/docs">API docs</a>!</p>
<h2 id="using-promises" class="deep-link"><a href="#using-promises">Using promises</a></h2>
<p>SweetAlert uses <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> to keep track of how the user interacts with the alert.</p>
<p>If the user clicks the confirm button, the promise resolves to <code>true</code>. If the alert is dismissed (by clicking outside of it), the promise resolves to <code>null</code>.</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Click&#xA0;on&#xA0;either&#xA0;the&#xA0;button&#xA0;or&#xA0;outside&#xA0;the&#xA0;modal.</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span>The&#xA0;returned&#xA0;value&#xA0;is:&#xA0;</span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>value</span><span class="punctuation section embedded js"><span>}</span></span></span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>This comes in handy if you want to warn the user before they perform a dangerous action. We can make our alert even better by setting some more options:</p>
<ul>
<li><code>icon</code> can be set to the predefined <code>&quot;warning&quot;</code> to show a nice warning icon.</li>
<li>By setting <code>buttons</code> (plural) to <code>true</code>, SweetAlert will show a cancel button in addition to the default confirm button.</li>
<li>By setting <code>dangerMode</code> to <code>true</code>, the focus will automatically be set on the cancel button instead of the confirm button, and the confirm button will be red instead of blue to emphasize the dangerous action.</li>
</ul>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;title</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Are&#xA0;you&#xA0;sure?</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Once&#xA0;deleted,&#xA0;you&#xA0;will&#xA0;not&#xA0;be&#xA0;able&#xA0;to&#xA0;recover&#xA0;this&#xA0;imaginary&#xA0;file!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;icon</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>warning</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;dangerMode</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>willDelete</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>if</span></span><span>&#xA0;</span><span class="meta brace round js"><span>(</span></span><span>willDelete</span><span class="meta brace round js"><span>)</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Poof!&#xA0;Your&#xA0;imaginary&#xA0;file&#xA0;has&#xA0;been&#xA0;deleted!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;icon</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span>&#xA0;</span><span class="keyword control js"><span>else</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Your&#xA0;imaginary&#xA0;file&#xA0;is&#xA0;safe!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<h1 id="advanced-examples" class="deep-link"><a href="#advanced-examples">Advanced examples</a></h1>
<h2 id="customizing-buttons" class="deep-link"><a href="#customizing-buttons">Customizing buttons</a></h2>
<p>We&apos;ve already seen how we can set the text on the confirm button using <code>button: &quot;Aww yiss!&quot;</code>.</p>
<p>If we also want to show and customize the <em>cancel button</em>, we can instead set <code>buttons</code> to an <em>array of strings</em>, where the first value is the cancel button&apos;s text and the second one is the confirm button&apos;s text:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Are&#xA0;you&#xA0;sure&#xA0;you&#xA0;want&#xA0;to&#xA0;do&#xA0;this?</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace square js"><span>[</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Oh&#xA0;noez!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Aww&#xA0;yiss!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta brace square js"><span>]</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>If you want one of the buttons to just have their default text, you can set the value to <code>true</code> instead of a string:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Are&#xA0;you&#xA0;sure&#xA0;you&#xA0;want&#xA0;to&#xA0;do&#xA0;this?</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace square js"><span>[</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Oh&#xA0;noez!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta brace square js"><span>]</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>So what if you need <em>more</em> than just a cancel and a confirm button? Don&apos;t worry, SweetAlert&apos;s got you covered!</p>
<p>By specifying an object for <code>buttons</code>, you can set exactly as many buttons as you like, and specify the value that they resolve to when they&apos;re clicked!</p>
<p>In the example below, we set 3 buttons:</p>
<ul>
<li><code>cancel</code>, which by default resolves to <code>null</code> and has a custom <code>&quot;Run away!&quot;</code> text.</li>
<li><code>catch</code>, which will resolve to the <code>value</code> we&apos;ve specified (<code>&quot;catch&quot;</code>) and has the custom text <code>&quot;Throw Pok&#xE9;ball!&quot;</code>.</li>
<li><code>defeat</code>. Here, we specify <code>true</code> to let SweetAlert set some default configurations for the button. In this case, it will set the <code>text</code> to <code>&quot;Defeat&quot;</code> (capitalized) and the resolved value to <code>defeat</code>. Had we set the <code>cancel</code> button to <code>true</code>, it would still resolve to <code>null</code> as expected.</li>
</ul>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>A&#xA0;wild&#xA0;Pikachu&#xA0;appeared!&#xA0;What&#xA0;do&#xA0;you&#xA0;want&#xA0;to&#xA0;do?</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;cancel</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Run&#xA0;away!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;catch</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Throw&#xA0;Pok&#xE9;ball!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;value</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>catch</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;defeat</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean true js"><span>true</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>switch</span></span><span>&#xA0;</span><span class="meta brace round js"><span>(</span></span><span>value</span><span class="meta brace round js"><span>)</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>case</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>defeat</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="keyword operator js"><span>:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Pikachu&#xA0;fainted!&#xA0;You&#xA0;gained&#xA0;500&#xA0;XP!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>break</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>case</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>catch</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="keyword operator js"><span>:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Gotcha!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Pikachu&#xA0;was&#xA0;caught!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>success</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>break</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>default</span></span><span class="keyword operator js"><span>:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Got&#xA0;away&#xA0;safely!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>You can check out all the available button options in the <a href="/docs#buttons">docs</a>.</p>
<h2 id="ajax-requests" class="deep-link"><a href="#ajax-requests">AJAX requests</a></h2>
<p>Since SweetAlert is promise-based, it makes sense to pair it with AJAX functions that are also promise-based. Below is an example of using <code>fetch</code> to search for artists on the iTunes API. Note that we&apos;re using <code>content: &quot;input&quot;</code> in order to both show an input-field <em>and</em> retrieve its value when the user clicks the confirm button:</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>&apos;</span></span><span>Search&#xA0;for&#xA0;a&#xA0;movie.&#xA0;e.g.&#xA0;&quot;La&#xA0;La&#xA0;Land&quot;.</span><span class="punctuation definition string end js"><span>&apos;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;content</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>input</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;button</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Search!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;closeModal</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant language boolean false js"><span>false</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>name</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>if</span></span><span>&#xA0;</span><span class="meta brace round js"><span>(</span></span><span class="keyword operator logical js"><span>!</span></span><span>name</span><span class="meta brace round js"><span>)</span></span><span>&#xA0;</span><span class="keyword control js"><span>throw</span></span><span>&#xA0;</span><span class="constant language null js"><span>null</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>return</span></span><span>&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>fetch</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span class="markup underline link https hyperlink"><span>https://itunes.apple.com/search?term=</span></span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>name</span><span class="punctuation section embedded js"><span>}</span></span></span><span>&amp;entity=movie</span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>results</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>return</span></span><span>&#xA0;</span><span class="variable other object js"><span>results</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>json</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>json</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="storage modifier js"><span>const</span></span><span>&#xA0;</span><span class="constant other js"><span>movie</span></span><span>&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="variable other object js"><span>json</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>results</span></span><span class="meta brace square js"><span>[</span></span><span class="constant numeric decimal js"><span>0</span></span><span class="meta brace square js"><span>]</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>if</span></span><span>&#xA0;</span><span class="meta brace round js"><span>(</span></span><span class="keyword operator logical js"><span>!</span></span><span>movie</span><span class="meta brace round js"><span>)</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>return</span></span><span>&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>No&#xA0;movie&#xA0;was&#xA0;found!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="storage modifier js"><span>const</span></span><span>&#xA0;</span><span class="constant other js"><span>name</span></span><span>&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="variable other object js"><span>movie</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>trackName</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="storage modifier js"><span>const</span></span><span>&#xA0;</span><span class="constant other js"><span>imageURL</span></span><span>&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="variable other object js"><span>movie</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>artworkUrl100</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;</span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;title</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Top&#xA0;result:</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;name</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;icon</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;imageURL</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>catch</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="variable parameter function js"><span>err</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="keyword control js"><span>if</span></span><span>&#xA0;</span><span class="meta brace round js"><span>(</span></span><span>err</span><span class="meta brace round js"><span>)</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Oh&#xA0;noes!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>The&#xA0;AJAX&#xA0;request&#xA0;failed!</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>error</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span>&#xA0;</span><span class="keyword control js"><span>else</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="variable other object js"><span>swal</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>stopLoading</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="variable other object js"><span>swal</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>close</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<h2 id="using-dom-nodes-as-content" class="deep-link"><a href="#using-dom-nodes-as-content">Using DOM nodes as content</a></h2>
<p>Sometimes, you might run into a scenario where it would be nice to use the out-of-the box functionality that SweetAlert offers, but with some custom UI that goes beyond just styling buttons and text. For that, there&apos;s the <code>content</code> option.</p>
<p>In the previous example, we saw how we could set <code>content</code> to <code>&quot;input&quot;</code> to get an <code>&lt;input /&gt;</code> element in our modal that changes the resolved value of the confirm button based on its value.
<code>&quot;input&quot;</code> is a predefined option that exists for convenience, but you can also set <code>content</code> to any DOM node!</p>
<p>Let&apos;s see how we can recreate the functionality of the following modal...</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Write&#xA0;something&#xA0;here:</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;content</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>input</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span>You&#xA0;typed:&#xA0;</span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>value</span><span class="punctuation section embedded js"><span>}</span></span></span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button></preview-button></p>
<p>...using a custom DOM node!</p>
<p>We&apos;re going to use <a href="https://facebook.github.io/react">React</a> here, since it&apos;s a well-known UI library that can help us understand how to create more complex SweetAlert interfaces, but you can use any library you want, as long as you can extract a DOM node from it!</p>
<div class="highlight js"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="meta import js"><span class="keyword control js"><span>import</span></span><span>&#xA0;</span><span class="variable other module js"><span>React</span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;</span><span class="punctuation definition modules begin js"><span>{</span></span><span>&#xA0;</span><span class="variable other module js"><span>Component</span></span><span>&#xA0;</span><span class="punctuation definition modules end js"><span>}</span></span><span>&#xA0;</span><span class="keyword control js"><span>from</span></span><span>&#xA0;</span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>&apos;</span></span><span>react</span><span class="punctuation definition string end js"><span>&apos;</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="meta import js"><span class="keyword control js"><span>import</span></span><span>&#xA0;</span><span class="variable other module js"><span>ReactDOM</span></span><span>&#xA0;</span><span class="keyword control js"><span>from</span></span><span>&#xA0;</span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>&apos;</span></span><span>react-dom</span><span class="punctuation definition string end js"><span>&apos;</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span class="storage modifier js"><span>const</span></span><span>&#xA0;</span><span class="constant other js"><span>DEFAULT_INPUT_TEXT</span></span><span>&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span class="meta class js"><span class="storage type class js"><span>class</span></span><span>&#xA0;</span><span class="entity name type class js"><span>MyInput</span></span><span>&#xA0;</span><span class="storage modifier js"><span>extends</span></span><span>&#xA0;</span><span class="entity other inherited-class js"><span>Component</span></span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="meta function js"><span class="entity name function constructor js"><span>constructor</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>props</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="variable language js"><span>super</span></span><span class="meta brace round js"><span>(</span></span><span>props</span><span class="meta brace round js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="variable language js"><span>this</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other property js"><span>state</span></span><span>&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant other js"><span>DEFAULT_INPUT_TEXT</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="punctuation definition function body end bracket curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="meta function method definition js"><span class="entity name function js"><span>changeText</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>e</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="storage type var js"><span>let</span></span><span>&#xA0;text&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="variable other object js"><span>e</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>target</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>value</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="variable language js"><span>this</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>setState</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;text</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="comment block js"><span class="punctuation definition comment js"><span>/*</span></span></span></span></div><div class="line"><span class="source js"><span class="comment block js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;*&#xA0;This&#xA0;will&#xA0;update&#xA0;the&#xA0;value&#xA0;that&#xA0;the&#xA0;confirm</span></span></span></div><div class="line"><span class="source js"><span class="comment block js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;*&#xA0;button&#xA0;resolves&#xA0;to:</span></span></span></div><div class="line"><span class="source js"><span class="comment block js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="punctuation definition comment js"><span>*/</span></span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="variable other object js"><span>swal</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>setActionValue</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span>text</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="punctuation definition function body end bracket curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="meta function method definition js"><span class="entity name function js"><span>render</span></span><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword control js"><span>return</span></span><span>&#xA0;</span><span class="meta brace round js"><span>(</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword operator comparison js"><span>&lt;</span></span><span>input</span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;value</span><span class="keyword operator assignment js"><span>=</span></span><span class="meta brace curly js"><span>{</span></span><span class="variable language js"><span>this</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other object property js"><span>state</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>text</span></span><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;onChange</span><span class="keyword operator assignment js"><span>=</span></span><span class="meta brace curly js"><span>{</span></span><span class="variable language js"><span>this</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="variable other object property js"><span>changeText</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>bind</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="variable language js"><span>this</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="keyword operator js"><span>/</span></span><span class="keyword operator comparison js"><span>&gt;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace round js"><span>)</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;&#xA0;</span><span class="punctuation definition function body end bracket curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span>&#xA0;We&#xA0;want&#xA0;to&#xA0;retrieve&#xA0;MyInput&#xA0;as&#xA0;a&#xA0;pure&#xA0;DOM&#xA0;node:</span><span>&#xA0;</span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>let</span></span><span>&#xA0;wrapper&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="support class js"><span>document</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="support function dom js"><span>createElement</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>&apos;</span></span><span>div</span><span class="punctuation definition string end js"><span>&apos;</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="variable other object js"><span>ReactDOM</span></span><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>render</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="keyword operator comparison js"><span>&lt;</span></span><span>MyInput&#xA0;</span><span class="keyword operator js"><span>/</span></span><span class="keyword operator comparison js"><span>&gt;</span></span><span class="meta delimiter object comma js"><span>,</span></span><span>&#xA0;wrapper</span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span class="storage type var js"><span>let</span></span><span>&#xA0;el&#xA0;</span><span class="keyword operator assignment js"><span>=</span></span><span>&#xA0;</span><span class="variable other object js"><span>wrapper</span></span><span class="meta delimiter property period js"><span>.</span></span><span class="support constant dom js"><span>firstChild</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span>&#xA0;</span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;text</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>&quot;</span></span><span>Write&#xA0;something&#xA0;here:</span><span class="punctuation definition string end js"><span>&quot;</span></span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;content</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;el</span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;buttons</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;confirm</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="meta brace curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="comment block js"><span class="punctuation definition comment js"><span>/*</span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="comment block js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;*&#xA0;We&#xA0;need&#xA0;to&#xA0;initialize&#xA0;the&#xA0;value&#xA0;of&#xA0;the&#xA0;button&#xA0;to</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="comment block js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;*&#xA0;an&#xA0;empty&#xA0;string&#xA0;instead&#xA0;of&#xA0;&quot;true&quot;:</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="comment block js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="punctuation definition comment js"><span>*/</span></span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;value</span><span class="keyword operator js"><span>:</span></span><span>&#xA0;</span><span class="constant other js"><span>DEFAULT_INPUT_TEXT</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta brace curly js"><span>}</span></span><span class="meta delimiter object comma js"><span>,</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta function-call js"><span class="meta arguments js"><span class="meta brace curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta delimiter method period js"><span>.</span></span><span class="entity name function js"><span>then</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="meta function arrow js"><span class="meta parameters js"><span class="punctuation definition parameters begin bracket round js"><span>(</span></span><span class="variable parameter function js"><span>value</span></span><span class="punctuation definition parameters end bracket round js"><span>)</span></span></span><span>&#xA0;</span><span class="storage type function arrow js"><span>=&gt;</span></span></span><span>&#xA0;</span><span class="punctuation definition function body begin bracket curly js"><span>{</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span>&#xA0;&#xA0;</span><span class="meta function-call js"><span class="entity name function js"><span>swal</span></span><span class="meta arguments js"><span class="punctuation definition arguments begin bracket round js"><span>(</span></span><span class="string quoted template js"><span class="punctuation definition string begin js"><span>`</span></span><span>You&#xA0;typed:&#xA0;</span><span class="source js embedded source"><span class="punctuation section embedded js"><span>${</span></span><span>value</span><span class="punctuation section embedded js"><span>}</span></span></span><span class="punctuation definition string end js"><span>`</span></span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></span></div><div class="line"><span class="source js"><span class="meta method-call js"><span class="meta arguments js"><span class="punctuation definition function body end bracket curly js"><span>}</span></span><span class="punctuation definition arguments end bracket round js"><span>)</span></span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></div>
<p><preview-button data-function="reactExample"></preview-button></p>
<p>This might look very complex at first, but it&apos;s actually pretty simple. All we&apos;re doing is creating an input tag as a React component. We then extract its DOM node and pass it into under the <code>swal</code> function&apos;s <code>content</code> option to render it as an unstyled element.</p>
<p>The only code that&apos;s specific to SweetAlert is the <code>swal.setActionValue()</code> and the <code>swal()</code> call at the end. The rest is just basic React and JavaScript.</p>
<figure align="center">
  <img src="/assets/images/modal-fb-example@2x.png" alt="Facebook modal" width="400">
  <figcaption>
    Using this technique, we can create modals with more interactive UIs, such as this one from Facebook.
  </figcaption>
</figure>
<h1 id="upgrading-from-1x" class="deep-link"><a href="#upgrading-from-1x">Upgrading from 1.X</a></h1>
<p>SweetAlert 2.0 introduces some important breaking changes in order to make the library easier to use and more flexible.</p>
<p>The most important change is that callback functions have been deprecated in favour of <a href="#using-promises">promises</a>, and that you no longer have to import any external CSS file (since the styles are now bundled in the .js-file).</p>
<p>Below are some additional deprecated options along with their replacements:</p>
<ul>
<li>When using a single string parameter (e.g. <code>swal(&quot;Hello world!&quot;)</code>), that parameter will be the modal&apos;s <code>text</code> instead of its <code>title</code>.</li>
<li><code>type</code> and <code>imageUrl</code> have been replaced with a single <code>icon</code> option. If you&apos;re using the shorthand version (<code>swal(&quot;Hi&quot;, &quot;Hello world&quot;, &quot;warning&quot;)</code>) you don&apos;t have to change anything.</li>
<li><code>customClass</code> is now <code>className</code>.</li>
<li><code>imageSize</code> is no longer used. Instead, you should specify dimension restrictions in CSS if necessary. If you have a special use case, you can give your modal a custom class.</li>
<li><code>showCancelButton</code> and <code>showConfirmButton</code> are no longer needed. Instead, you can set <code>buttons: true</code> to show both buttons, or <code>buttons: false</code> to hide all buttons. By default, only the confirm button is shown.</li>
<li><code>confirmButtonText</code> and <code>cancelButtonText</code> are no longer needed. Instead, you can set <code>button: &quot;foo&quot;</code> to set the text on the confirm button to &quot;foo&quot;, or <code>buttons: [&quot;foo&quot;, &quot;bar&quot;]</code> to set the text on the cancel button to &quot;foo&quot; and the text on the confirm button to &quot;bar&quot;.</li>
<li><code>confirmButtonColor</code> is no longer used. Instead, you should specify all stylistic changes through CSS. As a useful shorthand, you can set <code>dangerMode: true</code> to make the confirm button red. Otherwise, you can specify a class in the <a href="/docs#buttons">button object</a>.</li>
<li><code>closeOnConfirm</code> and <code>closeOnCancel</code> are no longer used. Instead, you can set the <code>closeModal</code> parameter in the <a href="/docs#buttons">button options</a>.</li>
<li><code>showLoaderOnConfirm</code> is no longer necessary. Your button will automatically show a loding animation when its <code>closeModal</code> parameter is set to <code>false</code>.</li>
<li><code>animation</code> has been deprecated. All stylistic changes can instead be applied through CSS and a custom modal class.</li>
<li><code>type: &quot;input&quot;</code>, <code>inputType</code>, <code>inputValue</code> and <code>inputPlaceholder</code> have all been replaced with the <code>content</code> option. You can either specify <code>content: &quot;input&quot;</code> to get the default options, or you can customize it further using the <a href="/docs#content">content object</a>.</li>
<li><code>html</code> is no longer used. Instead use the <a href="/docs#content">content object</a>.</li>
<li><code>allowEscapeKey</code> is now <code>closeOnEsc</code> for clarity.</li>
<li><code>allowClickOutside</code> is now <code>closeOnClickOutside</code> for clarity.</li>
</ul>

  </div>

</div>


    <div id="app"></div>

    <footer>
      <p>
        Hand-crafted with <span class="love-icon"></span> by
        <a href="http://tristanedwards.me">
          Tristan Edwards
        </a>
        + 
        <a href="https://github.com/t4t5/sweetalert/graphs/contributors">
          contributors
        </a>
      </p>
    </footer>

    <script src="/assets/js/index.js"></script>
  </body>

</html>
